<template>
    <div>       
        <el-tabs v-model="activeName" @tab-click="setup_change">
            <el-tab-pane label="入库记录" name="ru_name">
                <div class="ser_div">
            <el-row>
                <el-col>
                    <el-row style="display: flex; align-items: center">
                        <el-col :span="8" style="text-align: center"> 产品 </el-col>
                        <el-col :span="16">
                            <el-select v-model="ser.product_id" filterable placeholder="请选择产品" style="width: 100%">
                                <el-option v-for="(item, index) in product_List" :key="index" :label="item.product_name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="4">
                    <el-button class="add_btn" icon="el-icon-search"  @click="get_OutGetList">
                        搜索</el-button>
                    <el-button @click="add_ruku" icon="el-icon-plus" class="add_btn">外购产品入库</el-button>
                </el-col>
            </el-row>
        </div>
                <el-table :data="ru_list" stripe style="width: 100%" border>
                    <el-table-column prop="id" label="ID" width="60"> </el-table-column>
                    <el-table-column label="产品">
                        <template slot-scope="scope">
                            {{ scope.row.product.name }}
                        </template>
                    </el-table-column>
                    <el-table-column label="型号">
                        <template slot-scope="scope">
                            {{ scope.row.model.name }}
                        </template>
                    </el-table-column>
                    <el-table-column label="规格">
                        <template slot-scope="scope">
                            {{ scope.row.specification.name }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="数量"></el-table-column>
                    <el-table-column prop="price" label="单价"></el-table-column>
                    <el-table-column label="操作人">
                        <template slot-scope="scope">
                            {{ scope.row.operator_arr.company_name }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at" label="操作时间"></el-table-column>
                    <el-table-column prop="remark" label="备注"></el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info"
                                icon-color="red" title="是否删除这条数据？" @confirm="del_OutGet(scope.row.id)">
                                <el-button slot="reference" type="text" icon="el-icon-delete">
                                    删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination @current-change="handleCurrentChange" background
                        @prev-click="prev" @next-click="next" :current-page.sync="pagination.page"
                        :page-size="pagination.per_page" layout="total, prev, pager, next" :total="total">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="出库记录" name="chu_name">
                <el-table :data="chu_list" stripe style="width: 100%" border>
                    <el-table-column prop="id" label="ID" width="60"> </el-table-column>
                    <el-table-column label="订单ID">
                        <template slot-scope="scope">
                            {{ scope.row.order_id }}
                        </template>
                    </el-table-column>
                   
                    <el-table-column label="产品">
                        <template slot-scope="scope">
                            {{ scope.row.product?scope.row.product.name:"" }}
                        </template>
                    </el-table-column>
                    <el-table-column label="型号">
                        <template slot-scope="scope">
                            {{ scope.row.model?scope.row.model.name:"" }}
                        </template>
                    </el-table-column>
                    <el-table-column label="规格">
                        <template slot-scope="scope">
                            {{ scope.row.specification?scope.row.specification.name:'' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="出库日期">
                        <template slot-scope="scope">
                            {{scope.row.created_at }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="数量"></el-table-column>
                    <el-table-column prop="price" label="单价"></el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination @current-change="handleCurrentChange_chuku" background
                        @prev-click="prev_chuku" @next-click="next_chuku" :current-page.sync="pagination_chuku.page"
                        :page-size="pagination_chuku.per_page" layout="total, prev, pager, next" :total="total_chuku">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="库存" name="kuncun_name">
                <el-table :data="kucun_list" stripe style="width: 100%" border>
                    <el-table-column prop="id" label="ID" width="60"> </el-table-column>
                    <el-table-column label="产品">
                        <template slot-scope="scope">
                            {{ scope.row.product?scope.row.product.name:"" }}
                        </template>
                    </el-table-column>
                    <el-table-column label="型号">
                        <template slot-scope="scope">
                            {{ scope.row.model?scope.row.model.name:"" }}
                        </template>
                    </el-table-column>
                    <el-table-column label="规格">
                        <template slot-scope="scope">
                            {{ scope.row.specification?scope.row.specification.name:"" }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stock" label="数量"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info"
                                icon-color="red" title="是否删除这条数据？" @confirm="del_OutHouse(scope.row.id)">
                                <el-button slot="reference" type="text" icon="el-icon">
                                    删除</el-button>
                                </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination @current-change="handleCurrentChange_kucun" background
                        @prev-click="prev_kucun" @next-click="next_kucun" :current-page.sync="pagination_kucun.page"
                        :page-size="pagination_kucun.per_page" layout="total, prev, pager, next" :total="total_kucun">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>


        <el-dialog title="产品入库" :visible.sync="isRuku" width="40%" :before-close="close_dialog">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
                <div class="list_order">
                    <div class="lis">
                        <el-form-item label="产品" prop="product_id">
                            <el-select filterable clearable v-model="ruleForm.product_id" placeholder="请选择产品"
                                style="width: 100%" @change="get_OutModelListByProductId">
                                <el-option v-for="(item, index) in product_List" :key="index" :label="item.product_name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="型号" prop="model_id">
                            <el-select filterable v-model="ruleForm.model_id" clearable
                                @change="get_OutSpecificationListByProductId" placeholder="请选择型号" style="width: 100%">
                                <el-option v-for="(item, index) in Model_List" :key="index" :label="item.model_number"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="规格">
                            <el-select filterable v-model="ruleForm.specification_id" clearable placeholder="请选择规格"
                                style="width: 100%">
                                <el-option v-for="(item, index) in Specification_List" :key="index" :label="item.specification"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="数量">
                            <el-input-number v-model="ruleForm.num" :min="1"></el-input-number>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="单价">
                            <el-input-number v-model="ruleForm.price" :min="0"></el-input-number>
                        </el-form-item>
                    </div>
                    <div class="lis">
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close_dialog">取 消</el-button>
                <el-button type="primary" @click="submitadd('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>




    </div>
</template>

<script>
import {
    getOutSetList,
    getOutGetList,
    addOutGet,
    delOutGet,
    getModelNumberList,
    getSpecificationList,
    getOutHouseList,
    delOutHouse,
    getProductList
} from "@/api/product/index";
export default {
    data() {
        return {
            product_List: [],
            Model_List: [],
            Specification_List: [],
            isRuku: false,
            ru_list: [],
            chu_list: [],
            kucun_list:[],
            activeName: "ru_name",
            ser: {
                product_id: ""
            },
            title: "",
            isProduct: false,
            dataList: [],
            ruleForm: {
                product_id: "",
                model_id: "",
                specification_id: "",
                num: 1,
                price: 0,
                remark: ""
            },
            rules: {
                product_id: [
                    {
                        required: true,
                        message: "请选择产品",
                        trigger: "blur",
                    },
                ],
                model_id: [
                    {
                        required: true,
                        message: "请选择型号",
                        trigger: "blur",
                    },
                ],
            },
            pagination: {
                per_page: 10,
                page: 1,
            },
            pagination_chuku: {
                per_page: 10,
                page: 1,
            },
            pagination_kucun: {
                per_page: 10,
                page: 1,
            },
            total_chuku: 0,
            total: 0,
            total_kucun: 0,

        };
    },
    mounted() {
        this.get_OutGetList();
        this.get_OutProductList()
    },
    methods: {
        setup_change(tab, event) {
            console.log(tab, event);
            switch (tab.name) {
                case "ru_name":
                    this.get_OutGetList();
                    break;
                case "chu_name":
                    this.get_OutSetList();
                    break;
                case "kuncun_name":
                    this.get_OutHouseList()
                    break;
            }
        },
        del_OutHouse(id) {
            delOutHouse({ id }).then(res => {
                if (res.code == 200) {
                    this.$message.success("删除成功")
                    this.get_OutHouseList()
                }
            })
        },
        get_OutHouseList() {
            getOutHouseList().then(res => {
                if (res.code == 200) {
                    this.kucun_list = res.data.data
                    this.total_kucun=res.data.total
                }
            })
        },
        get_OutSetList() {
            getOutSetList().then(res => {
                if (res.code == 200) {
                    this.chu_list = res.data.data
                    this.total_chuku=res.data.total
                }
            })
        },
        del_OutGet(id) {
            delOutGet({ id }).then(res => {
                if (res.code == 200) {
                    this.$message.success("删除成功")
                    this.get_OutGetList()
                }
            })
        },
        add_ruku() {
            this.isRuku = true
            this.get_OutProductList()
        },
        // 外购产品
        get_OutProductList() {
            getProductList({ is_simple: 1,type_id:3 }).then(res => {
                if (res.code == 200) {
                    this.product_List = res.data
                }
            })
        },
        // 型号列表
        get_OutModelListByProductId(id) {
            getModelNumberList({ is_simple: 1, product_id: id }).then(res => {
                if (res.code == 200) {
                    this.Model_List = res.data.data
                }
            })
        },
        // 规格列表
        get_OutSpecificationListByProductId() {
            getSpecificationList({ is_simple: 1, product_id: this.ruleForm.product_id, model_id: this.ruleForm.model_id }).then(res => {
                if (res.code == 200) {
                    this.Specification_List = res.data.data
                }
            })
        },

        get_OutGetList() {
            getOutGetList({product_id:this.ser.product_id}).then(res => {
                if (res.code == 200) {
                    this.ru_list = res.data.data
                    this.total = res.data.total
                }
            })
        },

        close_dialog() {
            this.ruleForm = {
                product_id: "",
                model_id: "",
                specification_id: "",
                num: 1,
                price: 0,
                remark: ""
            };
            this.isRuku = false
        },
        set_product(row) {
            console.log(row)
            row.product.forEach(item => {
                this.ruleForm.product_ids.push(item.id)
            })
            this.ruleForm.color_names.push(row.color)
            this.ruleForm.id = row.id;
            this.title = "入库编辑";
            this.isProduct = true;
        },
        add_color() {
            this.title = "新增入库";
            this.isProduct = true;
            this.$nextTick(function () {
                this.$refs.ruleForm.resetFields();
            });
        },
        submitadd(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addOutGet(this.ruleForm).then((res) => {
                        if (res.code == 200) {
                            this.isRuku = false;
                            this.$message.success("提交成功");
                            this.get_OutGetList();
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
         //入库
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pagination.page = val;
            this.get_OutGetList();
              
        },
        prev() {
            this.pagination.page = this.pagination.page - 1;
            this.get_OutGetList();
        },
        next() {
            this.pagination.page = this.pagination.page + 1;
            this.get_OutGetList();
        },
        // 出库
        handleCurrentChange_chuku(val) {
            console.log(`当前页: ${val}`);
            this.pagination_chuku.page = val;      
            this.get_OutSetList(); 
        },
        prev_chuku() {
            this.pagination_chuku.page = this.pagination_chuku.page - 1;
            this.get_OutSetList();
        },
        next_chuku() {
            this.pagination_chuku.page = this.pagination_chuku.page + 1;
            this.get_OutSetList();
        },

  // 库存
  handleCurrentChange_kucun(val) {
            console.log(`当前页: ${val}`);
            this.pagination_kucun.page = val;       
        },
        prev_kucun() {
            this.pagination_kucun.page = this.pagination_kucun.page - 1;
            this.get_OutHouseList()
        },
        next_kucun() {
            this.pagination_kucun.page = this.pagination_kucun.page + 1;
            this.get_OutHouseList()
        },
       

        clolr_click() {
            this.pagination = {
                per_page: 10,
                page: 1,
            };
            getColorList({ color: this.color, ...this.pagination, ...this.ser }).then((res) => {
                if (res.code == 200) {
                    this.dataList = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
    },
};
</script>

<style scoped>
.list_order {
    display: grid;
    grid-template-columns: 1fr;
    place-items: left;
}
</style>